<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	    		xmlns:ui="http://java.sun.com/jsf/facelets"
	  			xmlns:h="http://java.sun.com/jsf/html"
	  			xmlns:f="http://java.sun.com/jsf/core"                
                xmlns:cs="http://myfaces.apress.com/custom"
				template="/WEB-INF/layouts/standard.xhtml"
				xmlns:a4j="http://richfaces.org/a4j"
				xmlns:rich="http://richfaces.org/rich"
				xmlns:c="http://java.sun.com/jstl/core">

	<ui:define name="content">
	
		<c:set var="controller" value="#{materialController}"/>
		
		<h4>New #{controller.modelName}</h4>
		
		<h:messages errorClass="errors" style="color:#ff1111" />
	
			<h:form id="#{controller.modelName}">
						
				<fieldset>
					<div class="field">
						<div class="label">Name:</div>
						<div class="input">
							<h:inputText id="name" value="#{controller.model.name}"/>
						</div>
					</div>
					<div class="field">
						<div class="label">Type:</div>
						<div class="input">
							<rich:comboBox  
											id="materialType" 
											value="#{controller.model.materialType}"
											suggestionValues="#{materialTypeController.all}"
											converter="#{materialTypeConverter}"
											>								
							</rich:comboBox>
						</div>
					</div>
					<div class="field">
						<div class="label">Deposit Amount:</div>
						<div class="input">
							<h:inputText id="deposit-amount" value="#{controller.model.depositAmount}"/>
						</div>
					</div>
					<div class="field">
						<div class="label">Total Count:</div>
						<div class="input">
							<h:inputText id="totalCount" value="#{controller.model.instances}"/>
						</div>
					</div>
					<div class="buttonGroup" style="text-align: center;">
						<h:commandButton disabled="#{controller.editing}" id="submit" action="#{controller.add}" value="Add"/>&#160;
						<h:commandButton disabled="#{!controller.editing}" action="#{controller.update}" value="Update"/>&#160;
						<h:commandButton id="cancel" value="Cancel" action="#{controller.cancel}"/>
					</div>	
				</fieldset>				
				<rich:dataTable value="${controller.data}" var="aBean">
						<f:facet name="header">
							<h:panelGrid columns="3">
								<h:outputText value="All #{controller.modelName}s"/>							
							</h:panelGrid>
						</f:facet>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Edit" />
							</f:facet>
							<h:commandButton style="width:15px;height:15px;#{controller.editing ? 'cursor: not-allowed':''}" title="#{controller.editing ? 'Edit already in progress...':'Click to Edit'}" image="/resrc/images/edit1.jpg" disabled="#{controller.editing}" value="Select" action="${controller.select}"/>
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Delete" />
							</f:facet>
							<h:commandButton disabled="#{controller.editing}" title="#{controller.editing ? 'Edit is in progress, please complete the editing...':'Click to Delete'}" image="/resrc/images/cross1.jpg" 
							style="width:15px;height:15px;#{controller.editing ? 'cursor: not-allowed':''}"    action="${controller.remove}" immediate="true"
							onclick="if(!showConfirmation('Are you sure to remove #{controller.modelName}: #{aBean.name} ?')) return false;"/>
						</rich:column>
						<rich:column>
							<f:facet name="header">Name</f:facet>
							<h:outputText value="#{aBean.name}"/>
						</rich:column>
						<rich:column>
							<f:facet name="header">Type</f:facet>
							<h:outputText value="#{aBean.materialType.name}"/>
						</rich:column>			
				</rich:dataTable>
			</h:form>

	</ui:define>
</ui:composition>